<template>
    <div class="RightContent">
        <div>
        <!-- 使用递归组件进行数据的渲染 -->
        <ul>
            <li v-for="item,i in vipData" :key="i">
            <p>{{item.name ||item}}</p>
            <!-- 要遍历 item.list 这个组件 可以直接调用当前组件 RightContent.vue -->
            <right-content :vipData="item.list"></right-content> <!--引用自己 --> 
            
            </li>
        </ul>
        </div>
    </div>
</template>
<!-- ❗ -->
<script>
export default {
    //调用自己  要在这里声明一下
    name:'RightContent',

    props:{
        //接收父组件传递过来的参数
        vipData:{
            type:Array,  //类型检测
            required:true, //必须传这个数据
            default(){   //设置默认值
                return []
            }
        }
    },
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    },
};
</script>
<style lang="scss" scoped>

</style>